<template>
	<view class="icon-complains">
		<view class="title-box">
			感谢您的宝贵意见，我们将听取你的意见经行修改
		</view>
		<view class="page_content">
			<view class="content-title">
				具体建议和内容
			</view>
			<textarea class="text" placeholder="内容/建议" v-model="content">
			</textarea>
		</view>
		
		<view class="page_content">
			<view class="content-title">
				您的联系方式
			</view>
			<view class="name">
			  <input class="input" placeholder="姓名" v-model="name"/>
			</view>
			<view class="phone">
			<input class="input" placeholder="手机号码"  v-model="phone"/>
			</view>
		</view>
		<view class="btn-wrapper" @click="btn()">提交</view>
	</view>
</template>

<script>
	import {
		addsuggest
	} from '@/api/api.js';
	export default {
			data() {
				return {
					content:'',
					name:'',
					phone:''
				}	
			},
			created() {},
			mounted() {
				
			},
			methods: {
				btn:function(){
					let that=this
					if (!that.content) return that.$util.Tips({
						title: '请填写建议内容'
					});
					if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone)) return that.$util.Tips({
						title: '请输入正确的手机号码'
					});
					if (!that.name) return that.$util.Tips({
						title: '请填写姓名'
					});
					
					addsuggest(that.content,that.phone,that.name).then(res => {
						that.content=''
						that.phone=''
						that.name=''
						if (res.status==200)
							that.$util.Tips({
								title: '成功',
								icon: 'success'
							});
						else
							that.$util.Tips({
								title: '失败',
								icon: 'error'
							});
					}).catch(err => {
						return that.$util.Tips({
							title: err
						});
					})
				}
			},
	}
	
</script>

<style lang="scss">
	.icon-complains{
		width: 100%;
		overflow: hidden;
		margin: 0rpx auto;
		.title-box{
			width: 100%;
			padding: 4%;
			overflow: hidden;
			color: #999;
			background: #FFFFFF;
		}
		.btn-wrapper{
			width: 90%;
			overflow: hidden;
			margin: 20rpx auto;
			background: #E8C787;
			line-height: 88rpx;
			text-align: center;
			font-size: 28rpx;
			color: #FFFFFF;
		}
		.page_content{
			margin-top: 20rpx;
			width: 100%;
			overflow: hidden;
			background-color: #FFFFFF;
			.name{
				width: 100%;
				padding: 4%;
				overflow: hidden;
				height: 88rpx;
				margin: 0rpx auto;
				input{
					padding-left: 12rpx;
					background: #F0F0F0;
				}
			}
			.phone{
				width: 100%;
				padding: 4%;
				overflow: hidden;
				height: 88rpx;
				margin:auto auto 15px auto;
				input{
					padding-left: 12rpx;
					background: #F0F0F0;
				}
			}
			.content-title{
				width: 100%;
				overflow: hidden;
				margin: 0rpx auto;
				padding: 4%;
				font-size: 28rpx;
				color: #999;
			}
			.text{
				width: 90%;
				overflow: hidden;
				margin: 20rpx auto;
				background: #F0F0F0;
				height: 120rpx;
				padding: 2%;
			}
		}
		
	}
	
	
</style>
